<script setup>
import Password from "@/components/Password.vue";
import Inputter from "@/components/Inputter.vue";
import instance from "@/utils/request.js";
import { ElMessage } from "element-plus";
import router from "@/router/router.js";
import { useAdminStore } from "@/stores/admin.js";

// 管理员登录页面

const admin = useAdminStore();

const admin_id = ref("");
const admin_password = ref("");

function login() {
  // 登录
  if(admin.admin_id !== null) {
    router.push("/admin/history");
  }
  instance.request({
    url: 'admin/index/login',
    method: 'POST',
    data: {
      admin_id: admin_id.value,
      admin_password: admin_password.value
    }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "登录失败！",
            type: "error"
          });
        }
        if(response.data.code === "ERROR_ACCOUNT") {
          ElMessage({
            message: "账号不存在！",
            type: "error"
          });
        }
        if(response.data.code === "ERROR_PASSWORD") {
          ElMessage({
            message: "账号或密码有误！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          admin.login(admin_id.value, admin_password.value);
          router.push("/admin/history");
        }
      })
      .catch(function(error){
        console.log(error);
        ElMessage({
          message: "登录失败！",
          type: "error"
        });
      });
}
</script>

<template>
  <div class="moon">
    <div class="out">
      <div class="in">
        <div class="login">
          <span style="font-size: 30px">酒店客房管理系统</span>
          <br><br><br>
          <span class="input-text">账号：</span>
          <inputter  class="input-text" width="200" v-model="admin_id"/><br><br>

          <span class="input-text">密码：</span>
          <password class="input-text" width="200" v-model="admin_password"/>
          <br><br><br>

          <el-button  color="#568fc1" @click="login"
                      class="button-width button-color input-text">
            <span>登录</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.moon {
  height: 100vh;
  background-image: url("@/assets/moon.png");
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
}
.out {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 50vh;
  height: 65vh;
}
.in {
  width: 50vh;
  height: 65vh;
  background-color: rgba(228, 247, 251, 70%);
  border-radius: 5px;
}
.login {
  text-align: center;
  padding-top: 3vh;
}
.input-text {
  font-size: 20px;
}
.button-width {
  height: 35px;
  width: 250px;
}
.button-color {
  --el-button-hover-bg-color: rgb(238, 244, 249) !important;
  --el-button-hover-text-color: #568fc1 !important;
  --el-button-text-color: white !important;
}
</style>